<!-- eslint-disable unused-imports/no-unused-vars -->
<script setup lang="ts">
import { StudentApi } from '@/apis'
import router from '@/router'
import { Message } from '@arco-design/web-vue'
import EnrollPermissionTab from './components/EnrollPermissionTab.vue'
import ParentInfoPanel from './components/ParentInfoPanel.vue'
import StudentClassTab from './components/StudentClassTab.vue'
import StudentInfoPanel from './components/StudentInfoPanel.vue'
import StudentScheduleTab from './components/StudentScheduleTab.vue'

defineOptions({
  name: 'StudentDetail',
})

const studentInfo = ref<StudentApi.StudentDetailResp>()
const studentList = ref<StudentApi.StudentResp[]>([])
const studentId = ref('')

const spinLoading = ref(false)
const route = useRoute()

const getStudentList = async (parentId: string) => {
  try {
    studentList.value = await StudentApi.getListByParentId(parentId)
  } catch (_) { }
}

const getStudentDetail = async () => {
  if (!studentId.value) {
    return
  }
  spinLoading.value = true
  studentInfo.value = await StudentApi.getStudentDetail(studentId.value)
  spinLoading.value = false
  getStudentList(studentInfo.value.parentId)
}

const changeStudent = (id: string) => {
  studentId.value = id
  getStudentDetail()
}

const readonly = ref<boolean>(true)
const ParentInfoPanelRef = ref<InstanceType<typeof ParentInfoPanel>>()
const StudentInfoPanelRef = ref<InstanceType<typeof StudentInfoPanel>>()
const loading = ref<boolean>(false)

const onEdit = async () => {
  if (readonly.value) {
    readonly.value = false
  } else {
    const stuData = StudentInfoPanelRef.value?.getData()
    // const parentData = ParentInfoPanelRef.value?.getData()
    const data = {
      name: stuData.name,
      // parentId: parentData.id,
      // parentPhone: parentData.mobilePhone,
      // parentName: parentData.name,
      // parentRelation: stuData.parentRelation,
      source: stuData.source,
      gender: stuData.gender,
      birthdate: stuData.birthdate,
      avatar: stuData.avatar,
      admissionYear: stuData.admissionYear,
      fulltimeSchool: stuData.fulltimeSchool,
      remark: '',
    }
    loading.value = true
    try {
      await StudentApi.updateStudent(data, `${studentInfo.value?.id}`)
      Message.success('修改成功')
      readonly.value = true
    } finally {
      loading.value = false
    }
  }
}

// 取消
const onCancel = () => {
  getStudentDetail()
  readonly.value = true
}
watch(() => route.query.id, () => {
  if (!route.query.id) {
    return
  }
  changeStudent(route.query.id as string)
}, { immediate: true })
</script>

<template>
  <ProPage title="学生详情" description="对学员进行统一管理">
    <template #title>
      <a-page-header title="学生档案" subtitle="" @back="router.back()">
        <template #extra>
          <ReadonlyEditButton
            v-permission="['edu:student:manage']" :readonly="readonly" :deleteable="false"
            size="mini" @edit="onEdit" @cancel="onCancel" @save="onEdit"
          />
        </template>
      </a-page-header>
    </template>
    <div class="content">
      <div class="left">
        <ParentInfoPanel :id="studentInfo?.parentId" ref="ParentInfoPanelRef" />
      </div>
      <a-divider direction="vertical" />
      <div class="right">
        <StudentInfoPanel
          ref="StudentInfoPanelRef"
          :readonly="readonly"
          :data="studentInfo"
          :student-list="studentList"
          @change-student="changeStudent"
        />
        <a-tabs default-active-key="1" lazy-load>
          <a-tab-pane key="1">
            <template #title>
              <icon-list /> 学员班级
            </template>
            <StudentClassTab :id="studentId" />
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #title>
              <icon-calendar-clock /> 学员课表
            </template>
            <StudentScheduleTab :id="studentId" />
          </a-tab-pane>
          <a-tab-pane key="3">
            <template #title>
              <icon-relation /> 选课权限
            </template>
            <EnrollPermissionTab :id="studentId" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </ProPage>
</template>

<style lang="less" scoped>
:deep(.page-card) {
  display: flex;
  flex-direction: column;

  .arco-card-body {
    flex: 1;
  }

  .arco-card-header {
    padding: 10px 0;
  }
}

.content {
  display: flex;
  height: 100%;
  width: 100%;

  .left {
    flex-shrink: 0;
    width: 300px;
    background: #f5f7fe;
  }

  .right {
    overflow-x: auto;
  }
}

:deep(.arco-page-header) {
  padding: 10px 0;
}
</style>
